<template>
    <div class="box">
        <h1>组件间通信9: vuex</h1>
        <h1>普通模式</h1>
        <div>count: {{ $store.state.count }}</div>
        <div>count: {{ count }}</div>
        <div>tenflod: {{ $store.getters.tenflod }}</div>
        <div>tenflod: {{ tenflod }}</div>
        <button @click="clickHandler1">调用actions修改count-1</button>
        <button @click="increment">调用actions修改count-2</button>
        <hr>
        <hr>
        <button @click="clickHandler2">调用mutations修改count-1</button>
        <button @click="ADD">调用mutations修改count-2</button>

        <Child1 />
        <Child2 />
    </div>
</template>

<script>
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
export default {
    name: 'VuexTest',
    components: {
        Child1,
        Child2,
    },
    computed: {
        ...mapState(['count']),
        ...mapGetters(['tenflod'])

    },
    methods: {
        ...mapActions(['increment']),
        ...mapMutations(['ADD']),
        clickHandler1() {
            this.$store.dispatch('increment')
        },
        clickHandler2() {
            this.$store.commit('ADD')
        }
    }
    
}
</script>

<style scoped>
</style>
